<template>
	<view>
		<view>
			<view class="" style="display: flex; margin-top: 40rpx; padding: 40rpx 60rpx">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(studentInfo.stuPhoto)"
						:src="studentInfo.stuPhoto" mode=""></image>
				</view>
				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{studentInfo.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{studentInfo.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{studentInfo.className}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top:8rpx;">
						<view class="character">联系电话：</view>
						<view style="display: flex; justify-content: space-between;">
							<view class="character">{{studentInfo.phone}} </view>
							<view @click="callStudent(studentInfo.phone)"
								style="margin-left: 30rpx; line-height: 30rpx;"><uni-icons type="phone-filled" size="20"
									color="#3333d3"></uni-icons>
							</view>
						</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{studentInfo.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">宿舍：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>

				</view>
			</view>
			<view style="padding:40rpx; font-size: 36rpx;">处理记录</view>
			<view class="bigBox">
				<view class="box" style="display: flex; align-items: center; justify-content: center;;"
					v-for="item in recordList" :key="item.id">
					<view class="card" v-if="item.type ==1">
						<view class="">
							<view class="ftColor">{{item.createBy}}电话联系学生</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==2">
						<view class="">
							<view class="ftColor">{{item.createBy}}宿舍管理员提交</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>

					<view class="card" v-if="item.type ==3">
						<view class="">
							<view class="ftColor">{{item.createBy}}提交给班主任处理</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>

						</view>
					</view>
					<view class="card" v-if="item.type ==4">
						<view class="">
							<view class="ftColor">{{item.createBy}}班主任处理结果</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>

						</view>
					</view>
					<view class="card" v-if="item.type ==5">
						<view class="">
							<view class="ftColor">{{item.createBy}}提交给部门经理处理</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
					<view class="card" v-if="item.type ==6">
						<view class="">
							<view class="ftColor">{{item.createBy}}部门经理处理结果</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>

						</view>
					</view>
					<view class="card" v-if="item.type ==7">
						<view class="">
							<view class="ftColor">{{item.createBy}}宿管反馈结束</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>

						</view>
					</view>
					<view class="card" v-if="item.type ==8">
						<view class="">
							<view class="ftColor">{{item.createBy}}宿管反馈未归寝</view>
							<view style="margin-top: 20rpx;">{{item.result}}</view>
						</view>
						<view class="" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view style="color: #aaa;">{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 50rpx 30rpx;">更新处理详情</view>
			<radio-group @change="checkFlag" style="padding: 15rpx;">
				<view class="" style="display: flex;">
					<view class="radio" style="padding:10rpx 0rpx;">
						<radio style="margin-right: 0rpx;" value="0" /><text
							style="font-size: 28rpx;">无法联系学生提交到部门经理处理</text>
					</view>
					<view class="radio" style="padding:10rpx 0rpx;">
						<radio style="margin-right: 0rpx;" value="1" /><text style="font-size: 28rpx;">学生在宿舍</text>
					</view>

				</view>
				<view class="" style="display: flex;">
					<view class="radio" style="padding:10rpx 0rpx;">
						<radio style="margin-right: 0rpx;" value="2" /><text style="font-size: 28rpx;">忘记提交请假</text>
					</view>
					<view class="radio" style="padding:10rpx 0rpx;">
						<radio style="margin-right: 0rpx;" value="3" /><text style="font-size: 28rpx;">学生未请假离校</text>
					</view>
				</view>


			</radio-group>
			<view class="" style="padding:0 40rpx; margin-top: 20rpx;">
				<uni-easyinput type="textarea" v-model="applyDesc" placeholder="添加备注"></uni-easyinput>
			</view>

			<view style="display: flex; margin-top: 50rpx;justify-content:space-around;">
				<view class="cancel" @click="cancelSubmit">取消</view>
				<view class="tijiao" @click="openPopup">提交处理结果</view>
			</view>
		</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import managementTeacher from "@/api/modules/managementTeacher.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				topName: "处理",
				userName: "",
				studentInfo: {},
				notReturnedDate: "",
				reason: "",
				buildNo: "",
				date: "",
				processContent: "",
				recordList: [],
				studentId: "",
				applyDesc: "",
				// applyID: "",
				// applyTitle: "",
				// businessKey: "",
				// currNode: "",
				// processInstanceId:"",
				// taskId:"",
				formData: {},
			}
		},
		methods: {
			cancelSubmit() {
				uni.navigateTo({
					url: this.bzrUrl
				})
			},
			getRecords(date, id) {
				managementTeacher.getTrackRecordByDateAndStuId(date, id).then(res => {
					console.log(res)
					this.recordList = res.data
					this.recordList.forEach(item => {
						item.createTime = parseTime(new Date(item.createTime).getTime())
						console.log(item.createTime)
					})
					console.log(this.recordList)
				})
			},

			callStudent(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						managementTeacher.createRecords({
							studentId: this.studentInfo.id,
							bdormitoryId: this.studentInfo.bdormitoryId,
							buildingNo: this.studentInfo.buildingNo,
							storey: this.studentInfo.storey,
							dormitoryNo: this.studentInfo.dormitoryNo,
							contactDate: this.date,
							type: 1,
							result: phone,
							createUserId: uni.getStorageSync("loginId")
						}).then(res => {
							console.log(res)
							console.log(res)
							this.getRecords(this.date, this.studentId)
						})
					}
				});
			},
			toUncheck() {
				uni.navigateTo({
					url: "/pages_main/managementTeacher/unCheckedStudents/unCheckedStudents"
				})
			},
			openPopup() {
				if (!this.applyDesc) {
					uni.showToast({
						title: "请填写备注",
						icon: "none"
					})
					return
				}
				if (!this.formData.flag) {
					uni.showToast({
						title: "请选择更新处理详情",
						icon: "none"
					})
					return
				}
				this.formData.applyDesc = this.applyDesc
				this.formData.createBy = this.userName
				console.log(this.formData)
				teacherClass.processWorkFlow(this.formData).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							duration: 2
						})
						uni.navigateTo({
							url: "/pages_main/classTeacher/teacherTaskApproval/teacherTaskApproval"
						})
					}

				})
			},
			// 拿到上传参数
			getFromData(options) {
				teacherClass.workFlowInfo({
					processInstanceId: options.processInstanceId,
					createBy: this.userName
				}).then(res => {
					this.formData = res.data
				})
			},
			checkFlag(e) {
				console.log(e)
				this.formData.flag = e.detail.value
			}
		},
		onLoad(options) {
			options = JSON.parse(options.item)
			console.log(options)
			console.log(uni.getStorageSync("loginId"))
			this.date = options.notRetrunedDate
			this.userName = uni.getStorageSync("userName")
			taskNotReturned.getStudentById(options.studentId).then(res => {
				this.studentInfo = res.data
			})
			this.notReturnedDate = options.notRetrunedDate
			this.studentId = options.studentId
			this.getRecords(options.notRetrunedDate, options.studentId)
			this.getFromData(options)
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;

	}


	.character {
		/* width: 150rpx; */
		font-size: 24rpx;
		/* color: #979999; */
		color: #444;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 20vh;
		background-color: #fff;
		width: 500rpx;
	}




	.card {
		width: 86%;
		/* border: 1rpx #000 solid; */
		padding: 20rpx 10rpx 20rpx 10rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.ftColor {
		color: #3333d3;
	}

	.cancel {
		width: 35%;
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.tijiao {
		width: 35%;
		background-color: #ff009a;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.box {
		/* margin-top: 20rpx; */
		border-top: 1rpx solid #ddd;
	}

	.box:nth-child(1) {
		margin-top: -20rpx;
		border-top: none;
	}
</style>